<<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">
                    信息发布设备统计
                </div>
                <div style="text-align: center;font-size: 12px;">设备总数&nbsp;<span style="font-weight: bold;font-size: 20px;">{{shebeiSum}}</span></div>
                <el-row :gutter="10" style="margin-top: 30px;">
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div style="float: right;">
                                    <el-image 
                                        style="width: 50px; height: 50px"
                                        :src="require('@/assets/img/elevator.png')"
                                        >
                                    </el-image>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="padding: 5px;font-size: 12px;">
                                    电梯信息屏
                                </div>
                                <div style="padding-left: 5px;font-weight: bold;">
                                    50
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div style="float: right;">
                                    <el-image 
                                        style="width: 50px; height: 50px"
                                        :src="require('@/assets/img/park.png')"
                                        >
                                    </el-image>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="padding: 5px;font-size: 12px;">
                                    停车场信息屏
                                </div>
                                <div style="padding-left: 5px;font-weight: bold;">
                                    50
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="margin-top: 30px;">
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div style="float: right;">
                                    <el-image 
                                        style="width: 50px; height: 50px"
                                        :src="require('@/assets/img/business.png')"
                                        >
                                    </el-image>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="padding: 5px;font-size: 12px;">
                                    商业屏
                                </div>
                                <div style="padding-left: 5px;font-weight: bold;">
                                    50
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div style="float: right;">
                                    <el-image 
                                        style="width: 50px; height: 50px"
                                        :src="require('@/assets/img/outdoor.png')"
                                        >
                                    </el-image>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="padding: 5px;font-size: 12px;">
                                    户外广告屏
                                </div>
                                <div style="padding-left: 5px;font-weight: bold;">
                                    50
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">设备状态统计</div>
                <el-row :gutter="10">
                    <el-col :span="6">
                        <div class="Deviceicon">
                            <i class="el-icon-video-pause" size="18"></i>
                        </div>
                        <div class="Deviceicon">
                            <i class="el-icon-video-play" size="18"></i>
                        </div>
                        <div class="Deviceicon">
                            <i class="el-icon-video-pause" size="18"></i>
                        </div>
                        <div class="Deviceicon">
                            <i class="el-icon-video-pause" size="18"></i>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="Devicelist">
                            无节目
                        </div>
                         <div class="Devicelist">
                            无节目
                        </div>
                        <div class="Devicelist">
                            无节目
                        </div>
                         <div class="Devicelist">
                            无节目
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="Devicelist">
                            50
                        </div>
                        <div class="Devicelist">
                            50
                        </div>
                        <div class="Devicelist">
                            50
                        </div>
                        <div class="Devicelist">
                            50
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="Devicelist">
                            25%
                        </div>
                        <div class="Devicelist">
                            25%
                        </div>
                        <div class="Devicelist">
                            25%
                        </div>
                        <div class="Devicelist">
                            25%
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">
                    节目类型统计
                </div>
                <div class="echartsbox" ref="echarts">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="12">
            <el-card style="height: 350px;">
                <div class="title">
                    今日节目播放列表
                </div>
                <div class="cesuo-list">
                    <el-table
                    :data="tableData"
                    height="300"
                    style="width: 100%;font-size: 10px"
                    >
                    <el-table-column
                        prop="programnumber"
                        label="节目编号"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="programname"
                        label="节目名称"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="programtype"
                        label="节目类型"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="programlabel"
                        label="节目标签"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="starttime"
                        label="节目开始时间"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="endtime"
                        label="节目结束时间"
                        align="center">
                    </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card style="height: 350px;">
                <div class="title">节目播放排行</div>
                <div class="cesuo-list">
                    <el-table
                    :data="tableData2"
                    height="300"
                    style="width: 100%;font-size: 10px"
                    >
                    <el-table-column
                        prop="ranking"
                        label="节目排行"
                        align="center">
                        <template slot-scope="scope">
						  <span v-if="scope.$index<3" :class="'pmcolor-'+(scope.$index+1)"><i class="el-icon-medal"></i>{{ scope.$index+1 }}</span>
                          <span v-else :class="'pmcolor-'+(scope.$index+1)">{{ scope.$index+1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="programname"
                        label="节目名称"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="programtype"
                        label="节目类型"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="running"
                        label="播放时长"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="playCount"
                        label="播放次数"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="creator"
                        label="创建人"
                        align="center">
                    </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        shebeiSum:'200',
        tableData:[{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },{
            programnumber:'0751',
            programname:'节目1',
            programtype:'普通节目',
            programlabel:'标签1',
            starttime:'08:30',
            endtime:'09:30'
        },],
        tableData2:[{
            ranking:'1',
            programname:'节目1',
            programtype:'普通节目',
            running:'30:00',
            playCount:'1020334',
            creator:'admin'
        },{
            ranking:'2',
            programname:'节目1',
            programtype:'普通节目',
            running:'30:00',
            playCount:'1020334',
            creator:'admin'
        },{
            ranking:'3',
            programname:'节目1',
            programtype:'普通节目',
            running:'30:00',
            playCount:'1020334',
            creator:'admin'
        },{
            ranking:'4',
            programname:'节目1',
            programtype:'普通节目',
            running:'30:00',
            playCount:'1020334',
            creator:'admin'
        },]

    }
  },
  created () {
  },
  mounted () {
    this.jiemuleiixngEcharts()
  },
  methods: {
    //节目类型统计
    jiemuleiixngEcharts(){
        var echarts=this.$refs.echarts;
		let myChart = this.$echarts.getInstanceByDom(
		  this.$refs.echarts
		);
		if (myChart == null) {
		  myChart = this.$echarts.init(echarts);
		}
		
		var option;
        option = {
                title: {
                    // text: 'Multiple Radar'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'center',
                    data: []
                },
                grid: {
                    left: '10%',
                    right: '4%',
                    bottom: '3%',
                    top:'20',
                    containLabel: true
                },
                radar: [
                    {
                    indicator: [
                        { text: '普通节目', max: 100 },
                        { text: '复合节目', max: 100 },
                        { text: '互动节目', max: 100 },
                    ],
                    center: ['55%', '50%'],
                    radius: 80,
                    },
                ],
                series: [
                    {
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    areaStyle: {},
                    data: [
                        {
                        value: [60, 73, 85, 40],
                        name: '告警等级'
                        }
                    ]
                    },
                ]
            };

          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    }
  },
}
</script>
<style lang="scss" scoped>
.title{
	padding: 10px;
	font-weight: bold;
}
.pmcolor-1{
  color:#ffffff;
  background-color: #ECD061;
  border-radius: 50%;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-2{
  color:#ffffff;
  background-color: #CBDDE0;
  border-radius: 50%;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-3{
  color:#ffffff;
  background-color: #FEBB9A;
  border-radius: 50%;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-4,.pmcolor-5,.pmcolor-6,.pmcolor-7,.pmcolor-8,.pmcolor-9{
  font-size:16px;
}
.Devicelist{
    text-align: center;
    font-size: 12px;
    padding: 10px;
    margin-top: 10px;
}
.Deviceicon{
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    margin-top: 10px;
}
.echartsbox{
    width: 100%;
    height: 260px;
}
</style>
